<template>

    <div>

        <h2>轮播图配置</h2>

        <div class="container">

            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="add">添加轮播图</el-button>
            </div>

            <el-tabs v-model="currentTab">
                <el-tab-pane label="列表" name="list">
                    <el-table :data="items" style="width: 100%">
                        <el-table-column label="ID" width="80" prop="id"></el-table-column>
                        <el-table-column label="排序" width="130" prop="list_order"></el-table-column>
                        <el-table-column label="轮播图" width="400">
                            <template slot-scope="scope">
                                <img v-if="scope.row" :src="scope.row.image.file_url" height="130">
                            </template>
                        </el-table-column>
                        <el-table-column label="轮播图地址" width="230">
                            <template slot-scope="scope">
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="日期" width="220" prop="updated_at">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="destroy(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="添加轮播图" name="add" v-if="currentTab == 'add'">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="轮播图">
                            <image-upload ref="imageUpload" @change="uploadBannerHandle" :files.sync="banner_files" :mutiple="true" :max="parseInt(1)"></image-upload>
                        </el-form-item>
                        <el-form-item label="分类">
                            <el-select v-model="redirect_to" placeholder="请选择" @change="selectRedirectTo(redirect_to)">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="排序值">
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="255" label="排序值"></el-input-number>
                        </el-form-item>

                        <el-form-item >
                            <el-button @click="close">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="修改" name="edit" v-if="currentTab == 'edit'">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="轮播图">
                            <image-upload ref="imageUpload" @change="uploadBannerHandle" :file-list="banner_files" :files.sync="banner_files" :mutiple="true" :max="parseInt(1)"></image-upload>
                        </el-form-item>
                        <el-form-item label="分类">
                            <el-select v-model="redirect_to" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="排序值">
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="255" label="排序值"></el-input-number>
                        </el-form-item>

                        <el-form-item >
                            <el-button @click="close">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
            </el-tabs>

        </div>


    </div>

</template>
<script>
    export default {
        props: {
            value: String
        },
      data() {
        return {

            currentTab: 'list',
            items: [],
            loading: true,
            params: {
            //
            },
            form: {},
            num: 1,
            banner_files: [],
            options: [
                {
                    value: 'redirect://oilcard:8888/station',
                    label: '加油站',
                    //disabled: true
                },
                {
                    value: 'redirect://oilcard:8888/recharge',
                    label: '充值',
                    //disabled: true
                },
                {
                    value: 'redirect://oilcard:8888/question',
                    label: '常见问题',
                    //disabled: true
                },
                {
                    value: 'redirect://oilcard:8888/wap?url=http%3A%2F%2Fapi.jiayouhui360.com%2Fapp%2Ffirst',
                    label: '新人专享',
                },
                {
                    value: 'redirect://oilcard:8888/wap?url=http%3A%2F%2Fapi.jiayouhui360.com%2Fapp%2Fsafe',
                    label: '安全保障',
                },
                {
                    value: 'redirect://oilcard:8888/wap?url=http%3A%2F%2Fapi.jiayouhui360.com%2Fapp%2Ffind',
                    label: '发现',
                },
                {
                    value: 'redirect://oilcard:8888/wap?url=http%3A%2F%2Fapi.jiayouhui360.com%2Fapp%2Finstruction',
                    label: '充值说明',
                },
              {
                value: 'redirect://oilcard:8888/wap?url=http%3A%2F%2Fapi.jiayouhui360.com%2Fapp%2Fshare',
                label: '分享有礼',
              },
            ],
            redirect_to: '',
            dialogVisible: false,
            edit_form: {}
        }
      },
      created() {
        this.fetch();
      },
      methods: {
            fetch() {
              axios.get('/admin/api/banner', {params: this.params}).then((res) => {
                if (res.data.code === 0) {
                  this.items = res.data.data.items;
                } else {
                  this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                console.log(err);
                this.$message('系统错误');
                this.loading = false;
              })
            },

            add() {
               this.dialogVisible = true;
               this.form = {};
               this.redirect_to = '';
               this.banner_files = [];
               this.num = 1;
               this.currentTab = 'add';
            },
            edit(item) {
                this.form = Object.assign({}, item);
                this.redirect_to = this.form.redirect_to;
                this.banner_files = [
                    {
                        id: this.form.image_id,
                        url: this.form.image.file_url
                    }
                ];
                this.num = this.form.list_order;
                this.currentTab = 'edit';
                this.dialogVisible = true;
            },
            close() {
                this.dialogVisible = false;
                this.form = {};
                this.edit_form = {};
                this.currentTab = 'list';
            },

            save() {
              if (this.form.id !== undefined) {
                this.update();
              } else {
                this.store();
              }
            },

            store() {
              axios.post('/admin/api/banner', this.form).then((res) => {
                if (res.data.code === 0) {
                    this.dialogVisible = false;
                    this.fetch();
                    this.currentTab = 'list';
                    this.$message('保存成功');
                } else {
                    this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                this.$message('系统错误');
                this.loading = false;
              })
            },

            update() {
                this.edit_form = {
                    image_id: this.form.image_id,
                    redirect_to: this.redirect_to,
                    list_order: this.num
                };
                axios.put('/admin/api/banner/' + this.form.id, this.edit_form).then((res) => {
                if (res.data.code === 0) {
                    this.dialogVisible = false;
                    this.fetch();
                    this.currentTab = 'list';
                    this.$message('保存成功');
                } else {
                    this.$message(res.data.msg);
                }
                this.loading = false;
              }).catch((err) => {
                    this.$message('系统错误');
                    this.loading = false;
              })
            },

            destroy(id) {
              let _this = this;
              axios.delete('/admin/api/banner/' + id).then((res) => {
                  if (res.data.code === 0) {
                      this.dialogVisible = false;
                      _this.fetch();
                      this.$message('删除成功');
                  } else {
                      this.$message(res.data.msg);
                  }
                  this.loading = false;
              }).catch((err) => {
                  this.$message('系统错误');
                  this.loading = false;
              })
            },

            selectRedirectTo(value) {
                this.form.redirect_to = value
            },


            handleChange(value) {
                this.form.list_order = value;
            },

            uploadBannerHandle(files) {
                if (typeof files[0] !== 'undefined') {
                    console.log(files[0]);
                      let i;
                      for (i = 0; i < files.length; i++) {
                          this.form.image_id = files[i].id;
                          //this.form.image_id = files[i].file_url
                      }
                  } else {
                      this.form.image_id = null;
                  }
            },
        }
    }
</script>